<template>
  <view class="content">
    <view class="head">
      <view class="title">
        <text>智能防盗锁</text>
      </view>
    </view>
    <view class="body">
      <view class="cont">
        <view
          class="option"
          @click="showMore('primary')"
          v-for="(item, index) in options"
          :key="index"
        >
          <label>产品介绍</label>
          <text>{{ clickedPrimary ? "v" : ">" }}</text>
        </view>
        <view class="primary_option" v-if="clickedPrimary">
          <view class="option" @click="showMore('secondary')">
            <label>主体结构</label>
            <text>{{ checkedSecondary ? "v" : ">" }}</text>
          </view>
        </view>
        <view class="secondary_option" v-if="checkedSecondary">
          <view class="details">
            <label>蓝牙模块</label>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "content",
  data() {
    return {
      clickedPrimary: false,
      checkedSecondary: false,
      status: "",
      options: [
        {
          id: 0,
          title: "产品介绍",
          options: [
            {
              id: 0,
              title: "主体结构",
              content:
                "该系统由两部分模块组成，分别是链锁模块和通信报警模块: \
              链锁模块由弹簧锁、报警线路、震动传感器、蓝牙模块、蜂鸣器等组成；\
              通信报警模块由NB-IoT+GPS模块、HT单片机、震动传感器等组成。",
            },
          ],
        },
        {
          id: 1,
          title: "功能模块",
        },
        {
          id: 2,
          title: "使用说明",
        },
        {
          id: 3,
          title: "常见问题",
        },
      ],
    };
  },
  methods: {
    showMore(value) {
      console.log(value);
      if (value == "primary") {
        this.clickedPrimary = !this.clickedPrimary;
      } else if (value == "secondary") {
        this.checkedSecondary = !this.checkedSecondary;
        console.log(this.checkedSecondary);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>